// 引入需要的图表，图表后缀都为 Chart
import { LineChart, PieChart, RadarChart } from 'echarts/charts';
// 引入title,legend,grid,tooltip等内置数据转换器组件，组件后缀都为 Component
import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components';
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
import { RefObject, useEffect, useRef, useState } from 'react';

// 注册必须的组件
echarts.use([
    LegendComponent,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LineChart,
    PieChart,
    RadarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);

/**
 * 使用 ECharts 的自定义 Hook。
 *
 * @returns 返回一个包含两个元素的数组，第一个元素是一个指向 chart容器DOM节点，第二个元素是 ECharts 实例。
 */
export const useCharts = (): [RefObject<HTMLDivElement>, echarts.EChartsType | undefined] => {
    // 创建一个 ref，用于存储chart容器DOM节点。
    const chartRef = useRef<HTMLDivElement>(null);

    // 创建一个状态，用于存储 ECharts 实例。
    const [chartInstance, setChartInstance] = useState<echarts.EChartsType>();

    // 在组件初始渲染后 => 初始化 ECharts 实例。
    useEffect(() => {
        const chart = echarts.init(chartRef.current as HTMLDivElement);
        setChartInstance(chart);
    }, []);

    return [chartRef, chartInstance];
};
